`
<template>
  <div class='collect'>
    <header>
      <img src="../../../static/index/left.png"
           @click='onClickLeft'>
      <span>我的收藏</span>
    </header>
    <ul class="content"
        v-if="UserCollect.length > 0">
      <router-link tag="li"
                   v-for="item in UserCollect"
                   :id="item.id"
                   :to="'/detail/'+item.infoid"
                   :key="item.id">
        <div class='txt'>
          <p>
            <img v-if="item.img_path" :src="`${imgUrl}${item.img_path}`"
                 alt="">
            <img v-else :src="`${imgUrl}${collectListUrl}`" alt="">
          </p>
          <div>
            <p>{{item.title}}</p>
            <p>区域:其他 区/今天</p>
            <p>房源编号7074 信息已认证为真实房源</p>
            <!--<p>价格:<span>面议</span></p>-->
          </div>
        </div>
        <div class='bet'>
          <span>时间:{{item.intime | moment}}</span>
          <button @click.stop="handleDeselect(item.infoid)">取消关注</button>
        </div>
      </router-link>
    </ul>
    <span v-else
          class="noData">暂无收藏</span>
    <footer v-if="this.UserCollect.length > 0">
      <button @click="cancelCollect">取消所有关注</button>
    </footer>
  </div>
</template>
<script>
  import {getStore} from '@/config/mUtils'

  export default {
    name: 'collect',
    data() {
      return {
        UserCollect: [],
        UserCollectId: [],
        imgUrl: 'http://menpuwang.com',
        collectListUrl: '/attachment/information/201908/1566036018dw19p.jpg'
      }
    },
    methods: {
      //初始化请求数据
      initDate() {
        let params = this.qs.stringify({
          "token": getStore('token')
        })
        this.$axios.post('user/collect', params).then((res) => {
          this.UserCollect = res.data.data
        })
      },
      onClickLeft() {
        this.$router.go(-1)
      },
      //取消所有收藏
      cancelCollect() {
        this.$dialog.confirm({
          title: '确认取消全部收藏吗？',
          // message: '弹窗内容'
        }).then(() => {
          this.UserCollectId = this.UserCollect.map((item) => {
            return item.infoid + '';
          })

          this.GetserverDate(this.UserCollectId)
        }).catch(() => {
          this.$toast.fail('取消操作')
        });
      },
      //取消单个关注
      handleDeselect(id) {
        this.GetserverDate(id)
      },
      //取消收藏接口
      GetserverDate(id) {
        this.$axios.post('user/removeCollect', this.qs.stringify({
          "token": getStore("token"),
          "infoids": id
        })).then((res) => {
          if ( res.data.status === 1 ) {
            this.$toast.success(res.data.message)
            this.initDate()
          } else {
            this.$toast.fail(res.data.message)
          }
        })
      }
    },

    created() {
      this.initDate()
    },
  }
</script>
<style scoped>
  @import url("../../assets/css/collect.css");
</style>
`
